<template>
  <el-dialog :title="$t('page.form.tips56')" :visible.sync="visible" :close-on-click-modal="false" append-to-body width=500px>
    <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="180px" label-position="left" :inline="false">
      <template v-if="data">
        <el-form-item :label="$t('page.form.settlementcurrency')" size="mini" prop="">
          <span>{{mchConfig.settleCurrency}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips57')" size="mini" prop="">
          <span>{{data.totalAccountCashAmount}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips58')" size="mini" prop="">
          <span>{{mchConfig.rateSettle.minWithdrawAmount/100}}</span>
        </el-form-item>
        <el-form-item l:label="$t('page.form.tips59')" size="mini" prop="">
          <span>{{mchConfig.rateSettle.maxWithdrawAmount/100}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips60')" size="mini" prop="">
          <span>{{mchConfig.rateSettle.withdrawPerFee/100}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item :label="$t('page.form.tips61')" size="mini" prop="targetCurrency">
          <el-select v-model="mainQuery.targetCurrency" :placeholder="$t('page.form.all')" clearable @change="fetchMainData">
             <el-option v-for="item in currencyOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips62')" size="mini" prop="transAmount">
          <el-input placeholder="" @input="getTransInfo" v-model.number="mainQuery.transAmount" @keyup.enter.native="fetchMainData" clearable></el-input>
        </el-form-item>

        <el-form-item :label="$t('page.form.tips27')" size="mini" prop="">
          <span>{{transInfo.transAmount / 100 || 0}} {{mainQuery.targetCurrency}}</span> <span>{{$t('page.form.tips29')}}{{transInfo.transRate / 10000 || 0}}</span>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item :label="$t('page.form.NameBank')" size="mini" prop="">
          <span>{{user.mch.bankAccountName}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips23')" size="mini" prop="">
          <span>{{user.mch.bankAccountNo}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips24')" size="mini" prop="">
          <span>{{user.mch.bankOpenBankNo}}</span>
        </el-form-item>
        <el-form-item :label="$t('page.form.tips28')" size="mini" prop="code">
          <el-input placeholder="" v-model="mainQuery.code" @keyup.enter.native="fetchMainData" clearable></el-input>
        </el-form-item>
      </template>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="mini">{{ $t('page.form.close') }}</el-button>
      <el-button @click="submit" type="primary" size="mini">{{ $t('page-register.form.submit') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ApiMain from "@/api/settle.tradeTrans";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  mixins: [],
  props: ["accountTypeOptions", "eventTypeOptions", "statusOptions"],
  components: {},
  data() {
    return {
      visible: false,
      loading: false,
      mchConfig: { rateSettle: {} },
      mainQueryRaw: null,
      mainQuery: {
        type: 1,
        code: undefined,
        transAmount: undefined,
        extraType: undefined,
        targetCurrency: undefined,
        targetMchEmail: undefined,
        bankAccountName: undefined,
        bankAccountNo: undefined,
        bankOpenBankNo: undefined,

      },
      currencyOptions: [

      ],
      rules: {
        code: [{ required: true, message: this.$t('page.form.tips30'), trigger: "blur" }],
        extraType: [{ required: true, message:   this.$t('page.form.tips31'), trigger: "blur" }],
        transAmount: [{ required: true,message:   this.$t('page.form.tips32'), trigger: "blur" }],
        targetCurrency: [{ required: true, message:   this.$t('page.form.tips33'), trigger: "blur" }],
        targetMchEmail: [{ required: true,message:   this.$t('page.form.tips34'), trigger: "blur" }],
        bankAccountName: [{ required: true, message:   this.$t('page.form.tips35'), trigger: "blur" }],
        bankAccountNo: [{ required: true,message:   this.$t('page.form.tips43'), trigger: "blur" }],
        bankOpenBankNo: [{ required: true,message:   this.$t('page.form.tips36'), trigger: "blur" }],
      },

      id: null,
      data: {},
      transInfo: {},
      action: "",
      activeName: "create",
    };
  },
  computed: {

    ...mapState("d2admin/user", {
      user: "info",
    }),

  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);
    console.log(this.user, "用户数据")
  },

  methods: {
    async getTransInfo(res) {
      if (!this.mainQuery.targetCurrency) return this.$message.error(this.$t('page.form.tips44'))

      if (!this.mainQuery.targetCurrency || !this.mainQuery.transAmount) {
        this.transInfo = {};
        return false;
      }


      if ((this.mainQuery.transAmount + this.mchConfig.rateSettle.transPerFee / 100) > this.data.totalAccountCashAmount) return this.$message.error(this.$t('page.form.tips45'))
      // let info = await ApiMain.getAmout({
      //   "sourceCurrency": this.mchConfig.settleCurrency,
      //   "targetCurrency": this.mainQuery.targetCurrency,
      //   "type": 1,
      //   "amount": this.mainQuery.transAmount * 100,
      //   "mchId": this.mchConfig.mchId
      // })
      // this.transInfo = info
      var info = {};
      try {

        info = await ApiMain.getAmout({
          "sourceCurrency": this.mchConfig.settleCurrency,
          "targetCurrency": this.mainQuery.targetCurrency,
          "type": 1,
          "amount": this.mainQuery.transAmount * 100,
          "mchId": this.mchConfig.mchId
        })

      } catch (err) {}

      this.transInfo = info      
    },
    fetchMainData() {

    },
    show(data) {
      this.data = data
      this.fetchData();

      this.visible = true;
    },
    async fetchData() {
      this.currencyOptions = await ApiMain.optinos()
      let config = await ApiMain.getConfig()
      this.mchConfig = config
      console.log('商户参数', config)
    },
    close() {
      this.visible = false;
      this.$emit("dialog-close");
      this.reset()
    },
    verifyForm() {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },
    async submit() {
      if (!this.verifyForm()) return false;
      this.loading = true;
      let from = JSON.parse(JSON.stringify(this.mainQuery))
      from.transAmount = from.transAmount * 100
      from.sourceCurrency = this.mchConfig.settleCurrency
      let data = await ApiMain.addTradeTrans(from)
      console.log('提交结果', data)
      this.$message({ message: this.$t('page.form.tips63'), type: 'success' });
      this.loading = false;
      this.close()
    },
    reset() {

      this.transInfo = {};
      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs["main-form"] && this.$refs["main-form"].resetFields();
      this.mainQuery = {
        type: 1,
      }
      this.id = null;
      this.data = null;
      this.activeName = "create";
    },
  },
};
</script>

<style lang="scss" scoped>
.wire {
  height: 1px;
  width: 100%;
  background-color: red;
  margin: 20px 0px;
}
</style>
